<template>
  <div class="login-container">
    <div class="login-container-box" v-show="diss">
      <h3>系统登录</h3>
      <el-input
        prefix-icon="el-icon-user"
        v-model="loginFrom.account"
        clearable
        placeholder="请输入账号"
      ></el-input>
      <el-input
        prefix-icon="el-icon-lock"
        placeholder="请输入密码"
        clearable
        v-model="loginFrom.password"
        show-password
      ></el-input>
      <el-button @click="CheckLogin" class="login-btn">登陆</el-button>
    </div>
    <slide-verify
      class="slideverify"
      v-show="dis"
      :l="42"
      :r="10"
      :w="310"
      :h="155"
      slider-text="向右滑动"
      ref="slideblock"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
  </div>
</template>

<script>
import { loginCheck } from "@/apis/users.js";
export default {
  data() {
    return {
      diss: true,
      dis: false,
      loginFrom: {
        account: "",
        password: "",
      },
    };
  },
  methods: {
    onSuccess() {
      this.diss = true;
      this.dis = false;
      this.$refs.slideblock.reset()
      loginCheck(this.loginFrom)
        .then((res) => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.$router.push("/home/home-content");
            localStorage.setItem("id", res.data.id);
            localStorage.role = res.data.role;
            localStorage.token = res.data.token;
            this.$message({
              message: "恭喜你，登陆成功",
              type: "success",
            });
          } else {
            this.$message.error("用户名或密码错误");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onFail() {
      this.$refs.slideblock.reset()
    },
    onRefresh() {
    },
    CheckLogin() {
      this.diss = false;
      this.dis = true;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/CommonColor.less");
.login-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/imgs/pld.png");
  .login-container-box {
    width: 360px;
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    h3 {
      text-align: center;
      color: white;
    }
    .login-btn {
      background-color: @basecolor1;
      color: #fff;
      border: 0px;
    }
  }
}
</style>